<template>
	<view class="">
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' :title="type==1?'申请退款':'申请退货'"
			:autoBack="true">
		</u-navbar>
		<view class="">
			<view class="lisBox padding32">
				<view class="lis flexJBC  fontS32">
					<view class="" style="width: 50%;">
						申请类型
					</view>
					<view class="">
						{{this.type==1?'我要退款(无需退货)':'我要退货退款'}}

					</view>
				</view>
			</view>
			<view class="lisBox  padding32" v-if="type==1">
				<view class="lis flexJBC fontS32">
					<view class="flex" style="align-items:stretch">
						<view class="">
							收货状态
						</view>
						<image src="/static/images/mine/Vector.png" mode="" style="width: 10rpx;height: 10rpx;"></image>
					</view>
					<view class="flex" @click="showgoodsType=true">
						<view :class="goodsType || goodsType===0?'co3':'co9'">
							{{goodsType===1?"已收到货":goodsType===0?"未收到货":"选择收货状态"}}
						</view>
						<u-icon name="arrow-right" color="#999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lisBox  padding32">
				<view class="lis flexJBC fontS32">

					<view class="flex" style="align-items:stretch;width: 50%;">
						<view class="">
							申请原因
						</view>
						<image src="/static/images/mine/Vector.png" mode="" style="width: 10rpx;height: 10rpx;"></image>
					</view>
					<view class="flex" @click="showapplyreason=true">
						<view :class="(applyreason || applyreason===0)?'co3':'co9'">
							{{(applyreason || applyreason===0)?applyreasonArray[applyreason].title:"申请原因"}}
						</view>
						<u-icon name="arrow-right" color="#999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lisBox  padding32" v-if="type==2">
				<view class="lis flexJBC fontS32">
					<view class="flex" style="align-items:stretch">
						<view class="">
							退货方式
						</view>
						<image src="/static/images/mine/Vector.png" mode="" style="width: 10rpx;height: 10rpx;"></image>
					</view>
					<view class="flex">
						<view class="flex" @click="showreturnway=true">
							<view :class="returnway?'co3':'co9'">
								{{returnway?returnwayArray[returnway-1].name:"选择退货方式"}}
							</view>
							<u-icon name="arrow-right" color="#999"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="lisBox  padding32 mt24">
				<view class="lis flexJBC fontS32">
					<view class="flex" style="align-items:stretch;width: 50%;">
						<view class="">
							申请金额
						</view>
						<image src="/static/images/mine/Vector.png" mode="" style="width: 10rpx;height: 10rpx;"></image>
					</view>
					<input placeholder-class="co9" disabled placeholder="输入申请金额" v-model="inputMoney" type="digit"></input>
				</view>
			</view>
			<view class="lisBox  padding32 mt24">
				<view class="lis  fontS32">
					<view class="flex" style="align-items:stretch;width: 50%;">
						<view class="">
							申请说明
						</view>
						<image src="/static/images/mine/Vector.png" mode="" style="width: 10rpx;height: 10rpx;"></image>
					</view>
					<u-textarea v-model="textAreaDescr" placeholder="请输入您的详细说明" :count='true'
						placeholderStyle="color:#999" maxlength='200' confirmType="done"></u-textarea>
					<!-- 上传图片 -->
					<view style="margin-top: 40rpx;flex-wrap: wrap;" class="flex">
						<view class="relative" v-for="(item,index) in pics " style="margin:0 60rpx 10rpx 0rpx;">
							<view class="absolute" style="top: -15rpx;right: 0;z-index: 9;" @click="del(index)" v-if="!pageLoading">
								<u-icon name="close-circle" :color="$store.state.homeRed" size="30rpx"></u-icon>
							</view>
							<image :src="item" mode=""  style="width: 120rpx;height: 120rpx;border-radius: 8rpx;">
							</image>
						</view>
						<image src="/static/images/mine/upImage.png" mode="" style="width: 120rpx;height: 120rpx;" @click="upImg" v-if="pics.length<3">
						</image>
					</view>
				</view>
			</view>
			<view class="lisBox  padding32 mt24">
				<view class="lis flexJBC fontS32">
					<view class="flex" style="align-items:stretch;width: 50%;">
						<view class="">
							联系电话
						</view>
						<image src="/static/images/mine/Vector.png" mode="" style="width: 10rpx;height: 10rpx;"></image>
					</view>

					<input placeholder-class="co9" placeholder="请输入手机号" v-model="phone" type='number'></input>

				</view>
			</view>

			<view class="lisBox  padding32 mt24" @click="submit()" style="margin-top: 100rpx;">
				<!-- <view class="btnClick1 center cof bgcred borderred fontS28">
					提交申请
				</view> -->
				<u-button :loading='loading' class="bgcred cof fontS32 fixed" shape='circle'>
					提交申请
				</u-button>
			</view>
		</view>
		<!-- 底部弹窗  收货状态 -->
		<u-popup :show="showgoodsType" @close="showgoodsType=false" round='20rpx' mode="bottom">
			<view class="padding32">
				<view class="center fontS40">
					选择收货状态
				</view>
				<u-radio-group @change="showgoodsType=false" v-model="goodsType" iconPlacement="right">
					<u-radio activeColor="red" :label="item.name" :name="item.id" labelSize='32rpx'
						v-for="item in shouhuoArray" :key="item.id"></u-radio>
				</u-radio-group>
			</view>
		</u-popup>
		<!-- 底部弹窗  申请状态 -->
		<u-popup :show="showapplyreason" @close="showapplyreason=false" round='20rpx' mode="bottom">
			<view class="padding32">
				<view class="center fontS40">
					申请原因
				</view>
				<u-radio-group @change="showapplyreason=false" v-model="applyreason" iconPlacement="right">
					<u-radio activeColor="red" :label="item.title" :name="index" labelSize='32rpx'
						v-for="(item,index) in applyreasonArray" :key="index"></u-radio>
				</u-radio-group>
			</view>
		</u-popup>
		<!-- 底部弹窗  退货状态 -->
		<u-popup :show="showreturnway" @close="showreturnway=false" round='20rpx' mode="bottom">
			<view class="padding32">
				<view class="center fontS40">
					选择退货方式
				</view>
				<u-radio-group @change="showreturnway=false" v-model="returnway" iconPlacement="right">
					<u-radio activeColor="red" :label="item.name" :name="item.id" labelSize='32rpx'
						v-for="item in returnwayArray" :key="item.id"></u-radio>
				</u-radio-group>
			</view>
		</u-popup>
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading: true,
				loading: false,
				showgoodsType: false,
				showapplyreason: false,
				showreturnway: false,
				price: '', //订单金额
				goodsType: '', //收货状态  0 未收货 1已收货',
				applyreason: "", //申请原因
				returnway: "", //退货方式
				order_product_id: '', //商退货品id
				show: false, //显示弹窗
				type: '', //1是 退款  2是退货退款
				phone: "", //手机号
				inputMoney: "", //金额
				textAreaDescr: '', //申请说明
				array: [],
				pics:[], //凭证列表
				shouhuoArray: [{
						name: "已收到货",
						id: 1
					},
					{
						name: '未收到货',
						id: 0
					}
				],
				applyreasonArray: [], //申请原因列表
				returnwayArray: [{
						name: "上门取件",
						id: 1
					},
					{
						name: '自行寄回',
						id: 2
					}
				],
			}
		},
		methods: {
			del(index){
				this.pics.splice(index,1)
			},
			change(e) {
				console.log(e, this.show1Radio)
			},
			
			submit() {
				// console.log(
				// 'order_product_id产品id', this.order_product_id, 
				// 'delivery_status收货状态', this.goodsType,
				// 'refund_type退款类型', this.type, 
				// '申请原因applyreason',this.applyreason,
				// '金额', this.inputMoney, 
				// 'pics图片',
				// '电话delivery_phone',this.phone,
				// '说明mark',this.textAreaDescr
				// );
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					this.$my.toast('手机格式有误')
					return
				};
				this.loading = true;
				this.$my.post('/index/refund/order/create', {
					order_product_id: this.order_product_id,
					delivery_status: this.goodsType,
					refund_type: this.type,
					refund_message: this.applyreason,
					refund_price: this.inputMoney,
					pics: this.pics,
					delivery_phone: this.phone,
					mark: this.textAreaDescr
				}).then(res => {
					this.loading = false;
					this.$my.toast(res.message)
					if (res.code == 200) {
					   this.$my.go('/pages/my/order/refund/refundList',500)
					}
				})
			},
			upImg(index) {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera '], //手机拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: this.$my.url + '/index/com/file',
								filePath: item,
								name: 'file',
								header: {
									"Accept-Language": uni.getStorageSync('locale') ?
										uni.getStorageSync('locale') : 'zh',
									'token': uni.getStorageSync('token'),
								},
								formData: {
									"file": tempFilePaths[0],
									use: 'company_photo'
								},
								success: (uploadFileRes) => {
									let res = JSON.parse(uploadFileRes.data);
									if (res.code == 200) {
										this.pics.push(res.data.file_path)
									} else {
									}
								}
							});
						})
					}
				});
			
			},
		},
		
		onLoad(option) {
			this.type = option.type //1退款 2退货退款
			this.order_product_id=option.order_product_id?option.order_product_id:''
			this.inputMoney=option.price;
			if (this.type == 2) {
				this.goodsType = 1
			}
			this.$my.post('/index/com/getProductReason', {
				type: 1
			}).then(res => {
				this.pageLoading = false
				if (res.code == 200) {
					this.applyreasonArray = res.data
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-radio-label--right {
		width: 100%;
		padding: 26rpx 0;
		box-sizing: border-box;
		border-bottom: 2rpx solid rgba(51, 51, 51, 0.06)
	}

	/deep/ .u-radio-label--right:last-of-type {
		border-bottom: none
	}

	/deep/ .u-radio-group--row {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.btnClick1 {
		height: 80rpx;
		line-height: 80rpx;
	}

	/deep/ .u-textarea {
		padding: 20rpx 0;
		box-sizing: border-box;
		border-color: #fff !important;
	}

	input {
		text-align: right;
	}

	.lisBox {
		// height: 100rpx;
		// line-height: 100rpx;

		background-color: #fff;

		.lis:nth-of-type(2) {
			border-bottom: 2rpx solid rgba(51, 51, 51, 0.06);
			border-top: 2rpx solid rgba(51, 51, 51, 0.06);
		}
	}
</style>
